<template>
	<div class="mx-[21px]">
		<div class="w-full h-full bg-bg-1 rounded pb-20">
			<base-list @request-more="setList" ref="listRef" list-class=" overflow-hidden">
				<template #header>
					<p class="text-t-3 text-lg" style="">{{ dayjs(showTime).format('YYYY-MM-DD') }}</p>
				</template>
				<template #item="{ item }">
					<n-scrollbar ref="scrollbarRef" :on-scroll="onScroll">
						<detail-item :item="item" />
					</n-scrollbar>
				</template>
			</base-list>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { provide, Ref, ref } from 'vue'
import dayjs from 'dayjs'
import { BaseList } from '@/components/base'
import { listExposeType } from '@/components/base/list/type.ts'
import { getBonusList } from '@/api/activity.ts'
import DetailItem from '../../components/rewards/detail-item.vue'
import { useActivityInfo } from '@/hooks/useActivityInfo.ts'
import { useActivityStore } from '@/store'
import { useActivityDateTimes } from '@/hooks/useActivityDateTimes.ts'
import { NScrollbar } from 'naive-ui'

defineProps({
	title: String
})

const scrollY = ref(0)

const resetScroll = () => (scrollbarRef.value as any).scrollTo({ top: 0 })

const scrollbarRef = ref(null)

provide<Ref<number>>('scrollY', scrollY)
provide<any>('resetScroll', resetScroll)

const listRef = ref<listExposeType>()
const activityStore = useActivityStore()

const showTime = ref('')

const { totalAmount, params, onLoad } = useActivityInfo()
const { thirty }: any = useActivityDateTimes()

const endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')

const setList = async (currentPage: number, finish: void | ((...arg1: any[]) => void)) => {
	try {
		if (activityStore.detailCardType === 'lockBonus') {
			params.value.type = ['ftdBonus']
			params.value.filterTime = [thirty, endTime]
		}
		const { data } = await getBonusList({
			...params.value,
			...activityStore.recordParams,
			filterTime:
				activityStore.detailCardType === 'lockBonus' ? [thirty, endTime] : params.value.filterTime,
			pageSize: 20,
			page: currentPage
		})
		if (activityStore.detailCardType === 'lockBonus') {
			finish?.(data.list, data.total)
		} else {
			finish?.(data.list, data.total)
		}
		showTime.value = data.list?.[0]?.updatedAt
		totalAmount.value = data.totalAmount
		onLoad(data)
	} catch (err) {
		console.log(err)
	}
}

const onScroll = (e: any) => {
	scrollY.value = e.target.scrollTop
}
</script>

<style lang="scss" scoped>
.bg-gradient-3 {
	background: linear-gradient(180deg, #7b240b 0%, #551a1d 30.41%, #412935 69.75%, #68482f 100%);
}
</style>
